import React, { Component } from "react";
import { Row, Col, Form, Checkbox, Button, Input, Typography } from "antd"
import "./index.scss"
import { reg } from "../../utils/validate";
import { UserOutlined, SafetyCertificateOutlined, LockOutlined, TabletOutlined } from "@ant-design/icons"
import { http } from "../../api";
import { HashHistory } from "../../utils";

const { Title } = Typography;
const { phone, pwd } = reg
export default function Register() {
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 3, span: 20 },
  };
  const tailLayoutme = {
    wrapperCol: { offset: 1, span: 16 },
  };
  const onFinish = (values) => {

    http.register(values).then(res => {
      if (res.data.code == 200) {
        HashHistory.replace("/login?phone" + values.phone)
      }
    })

  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login">
      <video
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4"
        className="myvideo"
        id="myvideo"
        autoPlay
        loop
        playsInline
        muted
        style={{
          position: "fixed", //视频定位方式设为固定
          right: 0,
          bottom: 0, //视频位置
          minWidth: "100 %",
          minHeight: "100 %", //不会因视频尺寸造成页面需要滚动
          // width: auto;
          height: "auto", //尺寸保持原视频大小
          zIndex: "-100", //z轴定位，小于0即可
        }}
      >
      </video>

      <Row className="mylogin" >
        <Col className="login-box" xs={23} sm={12} md={8} lg={8} xl={8} xxl={4} style={{ height: 300 }}>
          <Title level={3} style={{ textAlign: 'center', color: "#fff", height: "50px", lineHeight: "50px" }}>注册</Title>
          <Form
            {...layout}
            name="pass_login"
            className="login-form"
            initialValues={{

            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="手机号码"
              name="phone"
              rules={[
                { required: true, message: '请输入手机号码' },
                {
                  pattern: phone,
                  message: "请输入正确的手机号码"
                }
              ]}
            >

              <Input placeholder="请输入手机号码" prefix={<TabletOutlined className="site-form-item-icon" />} />

            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                { required: true, message: '请输入登录密码' },
                {
                  pattern: pwd,
                  message: "请输入6-16位数字字母组合密码"
                }
              ]}
            >
              <Input.Password placeholder="请输入密码" prefix={<LockOutlined className="site-form-item-icon" />} />
            </Form.Item>

            <Form.Item {...tailLayout} className="marginmin">
              <Button type="primary" htmlType="submit" block className="login-form-button">
                登录
              </Button>
            </Form.Item>
            <Form.Item {...tailLayout} className="login-list" style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ cursor: "pointer" }} onClick={() => HashHistory.push('/forgetpass')}>忘记密码</span>
              <span style={{ cursor: "pointer" }} onClick={() => HashHistory.push('/register')}>立即注册</span>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  );

}
